import React from 'react';
import { connect } from 'dva';
import { Dispatch } from 'redux';

import { Modal } from 'antd';

import printJS from 'print-js';

interface PrintElemProps {
  dispatch?: Dispatch;
  printVisible?: boolean;
  outboxInfo?: any;
}

@connect(({
  tookManagementReceipt: { printVisible, outboxInfo },
}: any) => ({
  printVisible,
  outboxInfo,
}))

class PrintElemInfo extends React.Component<PrintElemProps> {
  handleHiddenModal = () => {
    const { dispatch }: any = this.props;
    dispatch({
      type: 'tookManagementReceipt/changeModal',
      payload: false,
    });
  }

  handlePrint = () => {
    printJS({
      printable: 'billDetails',
      type: 'html',
      targetStyles: ['*'],
      onPrintDialogClose: () => '关闭',
      onError: error => error,
    });
  }

  render() {
    const { printVisible, outboxInfo }: any = this.props;
    const { data = {} } = outboxInfo;
    const { list = [] } = data;

    const totalPrice = list.reduce((origin: any, target: any) => (
      origin + Number(target.painExpress)
    ), 0);

    return (
      <Modal
        title="打印出库交接单"
        destroyOnClose
        visible={printVisible}
        width={1200}
        okText="打印"
        onOk={this.handlePrint}
        onCancel={this.handleHiddenModal}
      >
        <div id="billDetails">
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              fontSize: 12,
              textAlign: 'center',
            }}
          >
            <thead>
              <tr>
                <td
                  colSpan={13}
                  style={{
                    textAlign: 'center',
                    fontSize: 20,
                    fontWeight: 'bold',
                    border: '1px solid #ADADAD',
                    borderCollapse: 'collapse',
                    lineHeight: '200%',
                  }}
                >
                  {outboxInfo.logisName}揽件出库交接单
                </td>
              </tr>
            </thead>
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                fontSize: 12,
                color: 'red',
                textAlign: 'left',
              }}
              >
                <td colSpan={4} style={{ paddingLeft: 20 }}>
                  【提示！】：快件交接后，因乙方自身问题需加收费用的，由乙方承担
                </td>
              </tr>
              <tr style={{ lineHeight: '32px', height: '32px' }}>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>{outboxInfo.expressName}</td>
                <td style={{ border: '1px solid #ADADAD' }}>出库日期</td>
                <td style={{ border: '1px solid #ADADAD' }}>{outboxInfo.outTime}</td>
              </tr>
              <tr style={{ lineHeight: '32px', height: '32px' }}>
                <td style={{ border: '1px solid #ADADAD' }}>快件总量</td>
                <td style={{ border: '1px solid #ADADAD' }}>{data.count}</td>
                <td style={{ border: '1px solid #ADADAD' }}>应付快递公司总费用</td>
                <td style={{ border: '1px solid #ADADAD' }}>{totalPrice}元</td>
              </tr>
              <tr style={{ lineHeight: '32px', height: '32px' }}>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司确认签字</td>
                <td style={{ border: '1px solid #ADADAD' }} />
                <td style={{ border: '1px solid #ADADAD' }}>近邻宝确认签字/签字日期</td>
                <td style={{ border: '1px solid #ADADAD' }} />
              </tr>
            </tbody>
          </table>
          <table
            style={{
              border: '1px solid #000',
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
            }}
          >
            <tbody>
              <tr style={{
                lineHeight: '32px',
                height: '32px',
                textAlign: 'left',
              }}
              >
                <td colSpan={14} style={{ paddingLeft: 20 }}>快递明细</td>
              </tr>
              <tr style={{ lineHeight: '32px', height: '32px' }}>
                <td style={{ border: '1px solid #ADADAD' }}>序号</td>
                <td style={{ border: '1px solid #ADADAD' }}>运单号</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递公司</td>
                <td style={{ border: '1px solid #ADADAD' }}>目的地</td>
                <td style={{ border: '1px solid #ADADAD' }}>快件重量(KG)</td>
                <td style={{ border: '1px solid #ADADAD' }}>快递收入(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>保价费用(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>包装费(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>应付快递公司金额(元)</td>
                <td style={{ border: '1px solid #ADADAD' }}>结算方式</td>
                <td style={{ border: '1px solid #ADADAD' }}>出库时间</td>
                <td style={{ border: '1px solid #ADADAD' }}>揽件人</td>
                <td style={{ border: '1px solid #ADADAD' }}>出库人</td>
                <td style={{ border: '1px solid #ADADAD' }}>状态</td>
              </tr>
              {list.map((item: any, index: number) => (
                <tr
                  key={item.id}
                  style={{ lineHeight: '32px', height: '32px' }}
                >
                  <td style={{ border: '1px solid #ADADAD' }}>{index + 1}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.expCode}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.expressName}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.destination}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.weight}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.realFee}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.insureFee}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.packageFee}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.painExpress}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.settleDesc}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.outTime}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.courierName}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.sentName}</td>
                  <td style={{ border: '1px solid #ADADAD' }}>{item.statusName}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Modal>
    );
  }
}

export default PrintElemInfo;
